<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.isFinish" @click="chengeIsfinishi(todo.todoId)"/>
            <span v-show="!todo.isEdit">{{todo.todoName}}</span>
            <!-- 修改任务名称编辑框 -->
            <input
             v-show="todo.isEdit" type="text" 
             :value="todo.todoName" 
             @blur="handlblur(todo ,$event)"
             ref="inputTodoName"
            >
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.todoId)">删除</button>
        <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
</template>

<script>
    // 引入pubsub消息订阅与发布第三方库
    import pubsub from 'pubsub-js'

    export default {
        name:'TodoItem',
        //声明接收todo对象
        props:['todo'],
        methods:{
            //改变任务完成状态（当点击勾选框时）
            chengeIsfinishi(todoId){
                // 触发自定义事件，通知App组件将对应的todo对象的isFinish值取反
                this.$bus.$emit('updateTodoStatus',todoId);
            },

            //删除一个任务（当选择删除某个任务时）
            handleDelete(todoId){
                //弹窗提示是否删除
                if(confirm('确定删除吗？')){
                    // 发布消息，通知App组件根据todoId将对应的任务删除
                    pubsub.publish('deleteTodo' ,todoId);
                }
            },

            //显示任务名称编辑框（当点击某个任务的编辑按钮时，呈现输入框）
            handleEdit(todo){
                todo.isEdit = true;
                /*
                【$nextTick()方法】 
                [语法]：this.$nextTick(回调函数);
                [作用]：在下一次DOM更新结束后执行其指定的回调。
                [应用场景]：
                    当改变数据后（也就是上一行todo.isEdit = true的操作执行完DOM模板重新解析完毕后），
                    "要基于更新后的新DOM进行某些操作时"，要在$nextTick所指定的回调函数中执行。
                */
                this.$nextTick(function(){
                    // 获取元素标签中配置了ref属性的DOM元素 this.%refs.xxxx.操作方法
                    this.$refs.inputTodoName.focus(); // 获取输入焦点
                })
            },

            //修改任务名称（当编辑框失去焦点时代表完成修改）
            // 接收两个参数。参数1：todo对象用于修改编辑状态、获取任务Id； 参数2：编辑框Event事件对象用于获取编辑框输入的内容）
            handlblur(todo ,e){ 
                // 修改编辑状态
                todo.isEdit = false;
                // 在修改名称之前首先判断输入框是否为空 且判断现在输入框的值是否与原来一致 满足条件则不触发业务逻辑
                if(!e.target.value.trim()) return alert('输入不能为空！');
                if(e.target.value === todo.todoName) return alert('修改内容不能一致');
                // 修改任务名称
                this.$bus.$emit("updateTodoName" ,todo.todoId ,e.target.value);

                // console.log("updateTodoName" ,todo.todoId ,e.target.value);
            }
        }
    }
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover {
        background-color: #ddd;
    }

    li:hover button {
        display: block;
    }
</style>